<template>
  <PageLayout>
    <div class="table-box">
      <div class="head-box">
        <div class="title">菜单列表</div>
        <!-- <a-button class="add-tree-btn" type="primary" @click="edit()"
          >新增</a-button
        > -->
      </div>
      <div class="bg-fff d-flex flex-1">
        <!-- :apiFetch="apiFetch"  -->
        <div class="content-lf">
          <a-tree
            class="tree-box"
            :selected-keys="selectedKeys"
            :tree-data="treeData"
            :fieldNames="{
              children: 'childrenList',
              title: 'menuName',
              key: 'id',
            }"
            @select="(keys, e) => selectMenu(e.node.dataRef)"
          >
            <template #title="data">
              <a-dropdown :trigger="['contextmenu']">
                <div>{{ data.menuName }}</div>
                <template #overlay>
                  <a-menu
                    @click="
                      ({ key: menuKey }) => selectOperation(menuKey, data)
                    "
                  >
                    <a-menu-item key="add">新增</a-menu-item>
                    <a-menu-item key="edit">编辑</a-menu-item>
                    <a-menu-item key="remove">删除</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </a-tree>
          <a-button class="add-tree-btn" type="primary" @click="edit()"
            >新增</a-button
          >
        </div>
        <div class="content-ri">
          <!-- <a-button type="primary" class="mb-24 float-right" @click="edit()"
            >新增</a-button
          > -->
          <BasicTable
            ref="tableRef"
            :columns="columns"
            :query-params="queryData"
            :apiFetch="postMenuList"
            :noPagination="true"
          >
            <template #bodyCell="{ column, record }">
              <!-- <template v-if="column.key === 'action'">
                <a-space class="space-btn--box" :size="10">
                  <a class="btn" @click="edit(record)">编辑</a>
                  <a class="btn" @click="remove()">删除</a>
                </a-space>
              </template> -->
            </template>
          </BasicTable>
        </div>
      </div>
    </div>
    <AddMenuModal ref="addMenuModalRef" :data="dataRecord" @ok="getData" />
  </PageLayout>
</template>

<script setup>
import AddMenuModal from "./components/add-menu-modal";
import { comfirmModal } from "@/hooks/useModal";
import {
  postMenuTreeList,
  postMenuDetail,
  postMenuList,
  postMenuDelete,
} from "@/api/system";
import { onMounted } from "vue";
import { message } from "ant-design-vue";
import { menuTypeOptions } from "@/views/constant";
import { getArrayObj } from "@/utils/common";
const treeData = ref([]);
onMounted(() => {
  getData();
});
const selectedKeys = ref([]);
const queryData = reactive({});
const currentMenu = ref({});
const getData = () => {
  postMenuTreeList().then((res) => {
    treeData.value = res.data;
    if (treeData.value?.length) {
      if (!selectedKeys.value?.length) {
        selectedKeys.value = [treeData.value[0]?.id];
        currentMenu.value = treeData.value[0];
      }
      selectMenu(treeData.value[0]);
    }
  });
};
const tableRef = ref(null);
function selectMenu(item) {
  const { id } = item;
  selectedKeys.value = [id];
  queryData.parentId = id;
  currentMenu.value = item;
  tableRef.value.refreshTableData();
}

function selectOperation(type, obj) {
  console.log("type", type);
  console.log("obj", obj);
  switch (type) {
    case "add":
      edit({ isChild: true, parentId: obj.id, parentName: obj.menuName });
      break;
    case "edit":
      edit({...obj,isChild: !!obj.parentId});
      break;
    case "remove":
      comfirmModal({
        content: "确认删除该菜单",
        onOk() {
          postMenuDelete({ id: obj.id }).then(() => {
            message.success("删除成功");
            getData();
          });
        },
      });
      break;
  }
}
const columns = [
  {
    title: "序号",
    dataIndex: "index",
    width: "80px",
    customRender: (record) => `${record.index + 1}`,
  },
  {
    title: "菜单名称",
    dataIndex: "menuName",
    width: "80px",
    key: "menuName",
  },
  {
    title: "菜单类型",
    dataIndex: "menuType",
    width: "80px",
    key: "menuType",
    ellipsis: true,
    customRender: ({ record }) => getArrayObj(menuTypeOptions, record.menuType)?.label,
  },
  {
    title: "权限标识",
    dataIndex: "perms",
    width: "80px",
    key: "perms",
    ellipsis: true,
  },
  {
    title: "路由地址",
    dataIndex: "path",
    width: "80px",
    key: "path",
    ellipsis: true,
  },
  // {
  //   title: "操作",
  //   fixed: "right",
  //   dataIndex: "action",
  //   key: "action",
  //   width: 80,
  // },
];

const addMenuModalRef = ref(null);

const dataRecord = ref({});
const edit = (record) => {
  dataRecord.value = record || {};
  setTimeout(() => {
    addMenuModalRef.value.visible = true;
  }, 0);
};
</script>

<style lang="less" scoped>
.table-box {
  display: flex;
  flex-direction: column;
}
.content-lf {
  padding: 24px;
  width: 240px;
  height: 100%;
  border: 1px solid #eee;
  margin-right: 24px;
  display: flex;
  flex-direction: column;

  :deep(.tree-box) {
    flex: 1;
    overflow: auto;

    .title-box {
    }
  }
}
.content-ri {
  flex: 1;
}
</style>
